const webpack = require('webpack');
const path = require('path');
// 快速生成html页面
const HtmlwebpackPlugin = require('html-webpack-plugin');
// 独立打包样式文件
const ExtractTextPlugin = require('extract-text-webpack-plugin');
// 解决html文件的版本号
const AssetsPlugin = require('assets-webpack-plugin');
// css3自动加前缀
const autoprefixer = require('autoprefixer');

const config = require('./config/');

const IS_ENV = process.env.NODE_ENV == 'production'

//自定义"魔力"变量
// const definePlugin = new webpack.DefinePlugin({
//     __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'false')),
//     __PRERELEASE__: JSON.stringify(JSON.parse(process.env.BUILD_PRERELEASE || 'false'))
// });

//定义了一些文件夹的路径
const ROOT_PATH = path.resolve(__dirname);
const SRC_PATH = path.resolve(ROOT_PATH, './src');
// var APP_PATH = path.resolve(ROOT_PATH, './js/entry.js');
const BUILD_PATH = path.resolve(ROOT_PATH, './build');

// node_modules reactl路径  
const node_modules = path.resolve(__dirname, 'node_modules');
// var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js');
// var pathToMoment = path.resolve(node_modules, 'moment/min/moment.min.js');

// var web_modules = path.resolve(__dirname, 'web_modules');

var plugins = []
console.log(IS_ENV);
if (IS_ENV) { //生产环境
    plugins.push(new webpack.DefinePlugin({
        'process.env': { //设置成生产环境
            NODE_ENV: 'production'
        }
    }))

    plugins.push(
        new webpack.optimize.UglifyJsPlugin({ //压缩代码  丑化js 混淆代码而用
            compress: {
                warnings: false
            },
            except: ['$super', '$', 'exports', 'require', 'render'] //排除关键字
        })
    )
}

plugins.push(
    new webpack.BannerPlugin('This file is created by yanhaijiang')
)

plugins.push(
    new webpack.optimize.CommonsChunkPlugin('js/common.js', ['main'])
)

plugins.push(
    new HtmlwebpackPlugin({
        title: 'Hello World app',
        filename: 'index.html',
        //chunks这个参数告诉插件要引用entry里面的哪几个入口
        // chunks: ['app', 'vendors'],
        template: 'src/template/index.html',
        //要把script插入到标签里
        inject: true,
        // favicon: '../'
        minify: {
            // removeComments: true, //移除HTML中的注释
            // collapseWhitespace: true //删除空白符与换行符
        },
        hash: true,
        showErrors: true
    })
)

plugins.push( // 独立打包样式文件
    new ExtractTextPlugin("css/[name].css?[hash]-[chunkhash]-[contenthash]-[name]", {
        disable: false,
        allChunks: true
    })
)

plugins.push(
    new AssetsPlugin({ // html文件的版本号
        filename: 'app/webpack.assets.js',
        processOutput: function(assets) {
            return 'window.WEBPACK_ASSETS = ' + JSON.stringify(assets);
        }
    })
)

// plugins.push(
//     definePlugin
// )

plugins.push(
    new webpack.NoErrorsPlugin() //报错但不退出webpack进程
)

plugins.push(
    new webpack.optimize.DedupePlugin() // 查找相等或近似的模块，避免在最终生成的文件中出现重复的模块
)



var configs = {
    //上下文
    // context: __dirname + '',
    debug: true,
    // 启用source-map
    devtool: 'eval-source-map',
    //插件项
    plugins: plugins,

    //页面入口文件配置
    entry: ['./src/main.js'], //编译入口文件
    output: {
        publicPath: config.publicPath, //服务器的路径
        path: path.resolve(__dirname + config.publicPath), //编译到app目录
        filename: '[name].js?[hash]' //编译后的文件名
    },
    // entry: {
    //     // 其他库
    //     // vendors: ['jquery', 'react'], //react
    //     bundle: [
    //         // 'webpack-dev-server/client?http://localhost:8080',
    //         // 'webpack/hot/dev-server',
    //         SRC_PATH + '/main.js',
    //         //支持数组形式，将加载数组中的所有模块，但以最后一个模块作为输出  
    //         // SRC_PATH + '/js/ery.js',
    //     ],
    //     // main : SRC_PATH + '/js/main.js',
    // },
    //入口文件输出配置
    // output: {
    //     // path: __dirname,
    //     // path: path.resolve(__dirname, './build'),
    //     // 打包文件存放的绝对路径
    //     path: BUILD_PATH,
    //     // publicPath:网站运行时的访问路径
    //     // publicPath: "/output/",
    //     // [chunkhash:8] 自动生成版本号
    //     filename: '/js/[name]-[chunkhash:8]-[id].js',
    //     libraryTarget: 'umd',
    //     chunkFilename: "/js/[name]-[chunkhash:8].js",
    // },
    module: {
        //加载器配置
        //loader 
        //css-loader来处理css文件
        loaders: [
            // {
            //     test: /\.jsx?$/, // 用正则来匹配文件路径，这段意思是匹配 js 或者 jsx
            //     loader: 'babel' // 加载模块 "babel" 是 "babel-loader" 的缩写
            // },
            {
                test: /\.js(x)*$/,
                exclude: /^node_modules$/,
                loader: 'babel'
            },
            {
                test: /\.vue$/,
                loader: 'vue'
            },
            {
                test: /\.css/,
                exclude: /^node_modules$/,
                loader: `style-loader!css-loader!autoprefixer-loader?{ browsers: ['last 100 versions'] }!`
            },
            {
                test: /\.less/,
                exclude: /^node_modules$/,
                loader: `style-loader!css-loader!autoprefixer-loader?{ browsers: ['last 100 versions'] }!less-loader`
            },
            //.css 文件使用 style-loader 和 css-loader 来处理
            // {
            //     test: /\.css$/,
            //     loader: ExtractTextPlugin.extract('style-loader', 'css-loader?-convertValues')
            // }, 

            //.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理
            {
                test: /\.scss$/,
                loader: 'style!css!sass?sourceMap',
                exclude: /node_modules/, // 匹配不希望处理文件的路径
            },
            {
                test: /\.(png|jpg)$/,
                exclude: /^node_modules$/,
                loader: 'url?limit=2000&name=[name].[ext]' //注意后面那个limit的参数，当你图片大小小于这个限制的时候，会自动启用base64编码图片
            },
            //图片文件使用 url-loader 来处理，小于8kb的直接转为base64
            // { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' },
            // {
            //     test: /.(png|jpg)$/,
            //     loader: 'url?limit=8192&name=images/[hash:8].[name].[ext]',
            //     exclude: /node_modules/, // 匹配不希望处理文件的路径
            // }, 
            {
                test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url?limit=10000&minetype=application/font-woff'
            },
            {
                test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url?limit=10&minetype=application/font-woff'
            },
            {
                test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url?limit=10&minetype=application/octet-stream'
            },
            {
                test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'file'
            },
            {
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url?limit=10&minetype=image/svg+xml'
            },
            // 将jQuery暴露到全局:
            // {
            //     test: web_modules + 'jquery-1.11.2.min.js',
            //     loader: 'expose?jQuery'
            // },
        ]
    },
    postcss: [autoprefixer({ browsers: ['last 5 versions', 'ie 6-8', '> 1%'] })],
    devServer: {
        // port: 8000,
        // contentBase: './build/page/', //本地服务器所加载的页面所在的目录
        historyApiFallback: true, //不跳转
        colors: true, //终端中输出结果为彩色
        hot: true,
        inline: true, //实时刷新
        progress: true,
    },
    //其它解决方案配置
    resolve: {
        // 查找module的话从这里开始查找
        // root: 'E:/github/flux-example/src', //绝对路径
        root: '/Users/yanhaijiang/Desktop/wabpack',
        // 指明程序自动补全识别哪些后缀
        extensions: ['', '.coffee', '.js', 'jsx', '.es6', 'css', '.json', '.scss', 'png', 'jpg', 'jpeg'],
        // 模块别名定义，方便后续直接引用别名，无须多写长长的地址
        // alias: {
        //     // AppStore: 'src/js/stores/AppStores.js',
        //     // ActionType: 'src/js/actions/ActionType.js',
        //     // AppAction: 'src/js/actions/AppAction.js',
        //     // Director: 'web_modules/director.js',
        //     // jquery: 'web_modules/jquery-1.11.2.min.js',
        //     // react: pathToReact,
        //     // moment: pathToMoment
        // }
        alias: {
            vue: 'vue/dist/vue.js', //独立构建包括编译支持template选项 webpack打包时，需要设置别名
            store: path.resolve('src/store/'), //常用工具方法
        }
    },
    vue: {
        postcss: [
            require('autoprefixer')({
                browsers: ['last 100 versions']
            })
        ]
    },
    //添加了此项，则表明从外部引入，内部不会打包合并进去
    externals: {
        // jquery: 'jQuery',
        // react: 'React',
        //...
    }

}

module.exports = configs;